<template>
  <div id="viewArticle">
    <div id="content">
      <a-card
        v-if="article"
        title="作者信息"
        :bordered="false"
        class="userinfo"
      >
        <a-descriptions :column="1" size="small" border>
          <a-descriptions-item label="头像">
            <a-avatar>
              <img :src="article.user.userAvatar" />
            </a-avatar>
          </a-descriptions-item>
          <a-descriptions-item label="用户名"
            >{{ article.user.userName }}
          </a-descriptions-item>
          <a-descriptions-item label="简介"
            >{{ article.user.userProfile }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 文章内容 -->
      <a-card v-if="article" title="文章" :bordered="false" class="article">
        <p>{{ article.title }}</p>
        <MdViewer :value="article.content || ''" />
      </a-card>
    </div>
    <div id="comment">
      <comment-editor :id="props.id" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { PostControllerService, PostVO } from "../../../generated";
import { defineProps, onMounted, ref, withDefaults } from "vue";
import message from "@arco-design/web-vue/es/message";
import MdViewer from "@/components/MdViewer.vue";
import CommentEditor from "@/components/CommentEditor.vue";

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => "",
});

const article = ref<PostVO>();
const loadDate = async () => {
  const res = await PostControllerService.getPostVoByIdUsingGet(
    props.id as any
  );
  if (res.code === 0) {
    article.value = res.data;
  } else {
    message.error("加载失败" + res.message);
  }
};

onMounted(() => {
  loadDate();
});
</script>

<style scoped>
#viewArticle {
  display: flex;
  flex-direction: column;
}

#content {
  display: flex;
}

#comment {
  margin-top: 20px;
  width: 60vw;
}

div#viewArticle {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 20px;
}

.userinfo {
  margin-right: 20px;
  margin-top: 10px;
}

.article {
  width: 800px;
}
</style>
